<template>
    <div>
        <div class="box">
            <div class="box1">
                简易计算器
            </div>
            <!-- 三元运算符 -->
            <div class="box2" v-text="value == '' ? 0 : value" v-show="!flag"></div>
            <div class="box4" v-show="flag">
                <p v-for="item, index in arr " :key="index">{{ item }}</p>
            </div>
            <div class="box3">
                <table border="1" cellspacing="0" width="100%" height="100%" class="tab">
                    <tr>
                        <td width="25%" @click="append('clear')">Clear</td>
                        <td @click="append('bksp')">←</td>
                        <td @click="append('history')">◷</td>
                        <td @click="append('+')">+</td>
                    </tr>
                    <tr>
                        <td @click="append(9)">9</td>
                        <td @click="append(8)">8</td>
                        <td @click="append(7)">7</td>
                        <td @click="append('-')">-</td>
                    </tr>
                    <tr>
                        <td @click="append(6)">6</td>
                        <td @click="append(5)">5</td>
                        <td @click="append(4)">4</td>
                        <td @click="append('*')">*</td>
                    </tr>
                    <tr>
                        <td @click="append(3)">3</td>
                        <td @click="append(2)">2</td>
                        <td @click="append(1)">1</td>
                        <td @click="append('/')">/</td>
                    </tr>
                    <tr>
                        <td colspan="2" @click="append(0)">0</td>
                        <td @click="append('.')">.</td>
                        <td @click="append('=')">=</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {


    data() {
        return {
            // 返回的结果
            value: '',
            // 浏览的历史记录标识
            flag: false,
            // 浏览历史记录的数据
            arr: []
        };
    },


    methods: {
        // 调用函数
        append(val) {
            console.log(val);
            // 判断
            switch (val) {
                // 加
                case '+':
                    this.value += val
                    break;
                // 减
                case '-':
                    this.value += val
                    break;
                // 乘
                case '*':
                    this.value += val
                    break;
                // 除
                case '/':
                    this.value += val
                    if (this.value === 0) {
                        this.value = Infinity
                    }
                    break;
                // 小数点
                case '.':
                    this.value += val
                    break;
                // 判断数字
                case 0:
                    this.value += val
                    break;
                case 1:
                    this.value += val
                    break;
                case 2:
                    this.value += val
                    break;
                case 3:
                    this.value += val
                    break;
                case 4:
                    this.value += val
                    break;
                case 5:
                    this.value += val
                    break;
                case 6:
                    this.value += val
                    break;
                case 7:
                    this.value += val
                    break;
                case 8:
                    this.value += val
                    break;
                case 9:
                    this.value += val
                    break;
                // 等于
                case '=':
                    // eval计算的方法
                    this.value = eval(this.value)
                    //   向数组开头添加元素
                    this.arr.unshift(this.value)
                    this.arr=this.arr.slice(0, 5)
                    break;
                //   清空
                case 'clear':
                    this.value = ''
                    break;
                //   清空
                case 'history':
                    this.flag = !this.flag
                    break;
                // 退格
                case 'bksp':
                    // 定义变量接受一下数据
                    let str = this.value
                    // 定义变量接收字符串转变的字符串数组
                    let n = str.toString().split('')
                    // 删除数组末尾的数据
                    n.pop()
                    // 将数组转成字符串初始化页面
                    this.value = n.join('')
                    break;
            }
        },


    },
};
</script>

<style  scoped>
.box {
    width: 300px;
    height: 500px;
    background-color: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}

.box1 {
    flex: 1;
    text-align: center;
}

.box2 {
    flex: 2;
}

.box3 {
    flex: 4;
}

.box4 {
    flex: 1;
}

.tab {
    text-align: center;
}
</style>